<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jqueryT</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
</head>
<body>
<div class="well clearfix">
    <textarea class="form-control"></textarea><br>
    <span>140</span>
    <button class="js-tweet-button btn btn-primary pull-right" disabled>Tweet</button>
    <button class="js-add-photo-button btn btn-default pull-right">Add Photo</button>
</div>
<script type="text/javascript">
    // 给文本框绑定事件，监听是否有输入
    $("textarea").on("input", function() {
        if ($(".js-add-photo-button").hasClass("is-on")) {
            // add phtot按钮已经点击，剩余输入文本数量再减23
            $("span").text(140 - 23 - $(this).val().length);
        } else {
            // 计算剩余文本数量
            $("span").text(140 - $(this).val().length);
        }

        if ($(this).val().length > 0 || $(".js-add-photo-button").hasClass("is-on")) {
            // 如果文本框里有内容或者add phtot按钮已经点击，tweet button设置为可点击状态
            $(".js-tweet-button").prop("disabled", false);
        } else {
            // tweet button设置为不可点击状态
            $(".js-tweet-button").prop("disabled", true);
        }
    });

    // 给添加照片的按钮绑定点击事件监听
    $(".js-add-photo-button").on("click", function() {
        if ($(this).hasClass("is-on")) {
            $(this).removeClass("is-on").text("Add Photo");  // 切换add photo按钮显示状态

            $("span").text(140 - $("textarea").val().length);
            if ($("textarea").val().length === 0) {
                // 切换tweet按钮前需要先判断textarea当前状态
                $(".js-tweet-button").prop("disabled", true);
            }
        } else {
            $(this).addClass("is-on").text("✓ Photo Added");  // 切换add photo按钮显示状态

            $("span").text(140 - 23 - $("textarea").val().length);
            $(".js-tweet-button").prop("disabled", false);
        }
    });
</script>
</body>
</html>